<template>
	<transition name="slide-up">
		<div class="setting-wrapper" v-show="settingVisible === 0">
			<!-- defaultFontSize -->
			<!-- fontSizeList [] -->
			<div class="setting-content">
				<div class="setting-item">
					<div class="setting-item-label">字体</div>
					<div class="setting-item-content">
						<div class="content-fontSize">
							<div :class="{'noClick': overSetFontSizeRange('decrease')}" @click="setBookFontSize('decrease')" class="content-fontSize-flag"> 
								A<sup>-</sup>
							</div>
							<span class="content-fontSize-num">
								{{defaultFontSize}}
							</span>
							<div :class="{'noClick': overSetFontSizeRange('add')}" @click="setBookFontSize('add')" class="content-fontSize-flag">
								A<sup>+</sup>
							</div>
						</div>
						<div @click="showFontFamilyPopup" class="content-fontSize-flag systemFontSize">
							系统字体 <span class="icon-forward"></span>
						</div>
						
					</div>
				</div>
				<div class="setting-item">
					<div class="setting-item-label">背景</div>
					<div class="setting-item-content">
						<div class="content-background-wrapper">
							<div @click="handleClickToChangeTheme(item)" v-for="(item) in themeList" :key="item.name" class="content-background-item" :class="{'hasBorder':item.name === defaultTheme}" :style="handleItembackgroundStyle(item)">
								
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</transition>
</template>

<script>
	import { setBookObjectProperty,setLocalStorage } from '../../utils/localstorage.js';
	import { ebookMixin } from '../../utils/mixin.js';
	import { THEME_OPTIONS } from '../../utils/bookStaticData.js';
	import { removeHeaderCssForTheme } from '../../utils/common.js';
	export default {
		name: 'ebookSettingFont',
		mixins: [ebookMixin],
		data() {
			return {
				maxFontSize : 40, // 可设置的最大字号
				minFontSize : 15, // 可设置的最小字号 
				themeList: THEME_OPTIONS
			}
		},
		
		computed:{
			/**
			 * 是否超出设置字号的范围
			 * @param {Object} key ； add 增加字号； decrease 减少字号；
			 */
			overSetFontSizeRange() {
				return (key) => {
					let isOver;
					if(this.defaultFontSize >= this.maxFontSize && key === 'add') {
						isOver = true
					}else if(this.defaultFontSize <= this.minFontSize && key === 'decrease') {
						isOver = true
					}else {
						isOver = false
					}
					return isOver
				}
			}
		},
		methods: {
			/**
			 * 处理点击改变主题
			 * @param {Object} item 主题对象
			 */
			handleClickToChangeTheme(item) {
				const oldTheme = this.defaultTheme
				this.setdefaultTheme({
					defaultTheme: item.name
				}).then(() => {
					this.currentBook.rendition.themes.select(this.defaultTheme)
					setLocalStorage('defaultTheme',this.defaultTheme)
					// 删除之前的主题老样式
					removeHeaderCssForTheme(`${process.env.VUE_APP_RESOURCE_URL}/theme/${oldTheme}.css`)
					// 初始化设置页面主题
					this.initPageTheme()
				})
			},
			
			/**
			 * 设置主题按钮背景色
			 * @param {Object} item 主题对象
			 */
			handleItembackgroundStyle(item) {
				const background = item.style.body.background
				return {
					background
				}
			},
			
			/**
			 * 设置图书的字号大小
			 * @param {Object} key； add 增加字号； decrease 减少字号；
			 */
			setBookFontSize(key) {
				if((this.defaultFontSize >= this.maxFontSize && key === 'add') || (this.defaultFontSize <= this.minFontSize && key === 'decrease')) {
					return
				}
				
				
				let defaultSize = key === 'add' ? this.defaultFontSize + 1 : this.defaultFontSize - 1;
				this.setdefaultFontSize({
					defaultFontSize : defaultSize
				})
				this.currentBook.rendition.themes.fontSize(defaultSize)
				// 设置  字号缓存
				setBookObjectProperty(this.fileName,'defaultFontSize',this.defaultFontSize)
			},
			// 显示字体设置的弹窗
			showFontFamilyPopup() {
				this.setfontFamilyVisible({
					fontFamilyVisible: true
				})
			}
		},
		mounted() {

		}
	}
</script>

<style lang="scss" scoped>
	@import '@/assets/styles/global.scss';
	.setting-wrapper {
		position: absolute;
		bottom: pxTorem(48);
		left: 0;
		z-index: 101;
		width: 100%;
		height: pxTorem(144);
		background: white;
		box-shadow: 0 pxTorem(-8) pxTorem(8) rgba(0,0,0,.15);
		.setting-content {
			padding: pxTorem(20);
			.setting-item {
				@include flexYcenter;
				margin-bottom: pxTorem(30);
				&:last-child {
					margin-bottom: pxTorem(0);
				}
				.setting-item-label {
					font-size: pxTorem(14);
					width: pxTorem(50);
					overflow: hidden;
					white-space: nowrap;
				}
				.setting-item-content {
					@include flexYcenter;
					flex: 1;
					justify-content: space-between;
					.content-fontSize {
						@include flexYcenter;
						.content-fontSize-num {
							font-size: pxTorem(14);
							margin: 0 pxTorem(10);
						}
					}
					.content-fontSize-flag {
						font-size: pxTorem(16);
						padding: pxTorem(10) pxTorem(20);
						background: #EBEBEB;
						border-radius: pxTorem(18);
						&.noClick {
							opacity: 0.5;
						}
						&.systemFontSize {
							padding: pxTorem(10) pxTorem(16);
							box-sizing: border-box;
							[class^='icon'] {
								font-size: 12px;
							}
						}
					}
					
					.content-background-wrapper {
						@include flexYcenter;
						width: 100%;
						justify-content: space-between;
						.content-background-item {
							@include flexCenter;
							width: 30px;
							height: 30px;
							box-sizing: border-box;
							border-radius: 50%;
							&.hasBorder {
								border: 1px solid #2F2F2F;
							}
						}
					}
				}
			}
		}
	}

</style>
